<template>
	<div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'AMAP',
	data(){
		return{
			map:null,
			mapData:[
				{
					"name": "通州区",
					"lat": "39.911104",
					"lng": "116.667253",
					"child": [
						{"name": "项目1","lat":"39.860957","lng":"116.720392"},
						{"name": "项目2","lat":"39.768285","lng":"116.776523"},
						{"name": "项目3","lat":"39.820213","lng":"116.545006"}
					]
				},
				{
					"name": "海淀区",
					"lat": "40.070486",
					"lng": "116.193235",
					"child":  [
						{"name": "项目1","lat":"40.058377","lng":"116.370084"},
						{"name": "项目2","lat":"40.07373","lng":"116.178453"},
						{"name": "项目3","lat":"40.082459","lng":"116.243271"},
						{"name": "项目4","lat":"40.077315","lng":"116.239001"},
						{"name": "项目5","lat":"40.077233","lng":"116.246831"}
					]
				}
			],
			level:11,
			pointData:new Map(),
			pointChildData:new Map()
		}
	},
	methods:{
		initMap(){
			let vm = this;
			
			AMapLoader.load({
				"key": vm.$amapkey,
				"version": "2.0",
				"plugins": [],
				"AMapUI": {
						"version": '1.1',
						"plugins":[],
				},
				"Loca":{
						"version": '2.0'
				},
			}).then((AMap)=>{
				vm.map = new AMap.Map('container', {
						zoom:10,
						zooms:[10,18],
						center: [116.397455,39.909187],
						viewMode:'3D'
				})
				vm.handleCreateMarker()
				vm.handleAddEvent()
			});
		},
		handleCluster(){
			
			
			
				let count = this.markers.length;
				// 设置聚合标记样式
				let _renderClusterMarker = (context) => {
					//移除上一次添加的滑入滑出事件，由于每次移动、放大缩小地图都会重新计算渲染聚合标注，因此必须移除之前的事件，否则事件会不断叠加导致重复
					context.marker.off('mouseover', hanldeBubble)
					context.marker.off('mouseout', cancleBubble)
					//添加本次产生的新聚合标记的滑入滑出事件
					context.marker.on('mouseover', hanldeBubble)
					context.marker.on('mouseout', cancleBubble)
					let extData = []
					context.markers.forEach((item) => {
						extData.push({
								name: item.w.name
						})
					})
					// 将标记名称等存入marker的拓展信息字段extData中
					context.marker.extData = extData
					let factor = Math.pow(context.count / count, 1 / 18);
					let div = document.createElement('div');
					let Hue = 180 - factor * 180;
					let bgColor = this.bgColor
					let fontColor = '#ffffff';
					let borderColor = '#ffffff';
					let shadowColor = 'rgba(0,0,0,0.3)';
					div.style.backgroundColor = bgColor;
					//标记的大小可以固定写，也可以根据聚合点的数量来决定大小
					let size = 30
					// let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
					div.style.width = div.style.height = size + 'px';
					div.style.border = 'solid 2px ' + borderColor;
					div.style.borderRadius = size / 2 + 'px';
					div.style.boxShadow = '0 0 12px ' + shadowColor;
					div.innerHTML = context.count;
					div.style.lineHeight = (size - 2) + 'px';
					div.style.color = fontColor;
					div.style.fontSize = '14px';
					div.style.textAlign = 'center';
					context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
					context.marker.setContent(div)
				}
				this.cluster = new AMap.MarkerClusterer(
					this.map,   //指定地图对象
					this.markers,  //指定需要聚合的点标记对象
					{
							// averageCenter: false,   // 聚合点的图标位置是否是所有聚合内点的中心点
							gridSize: 100,   //聚合计算时网格的像素大小，默认60
							renderClusterMarker: _renderClusterMarker,   //聚合点的自定义绘制
							zoomOnClick: false,  //点击聚合点时，是否散开
					}
				)
		},
		handleCreateMarker(){
			let textStyle = {
				'background': 'rgba(0, 0, 0, .6)',
				'font-size': '14px',
				'border': '0px',
				'width': '100px',
				'padding-top': '24px',
				'box-sizing': 'border-box',
				'border-radius': '100px',
				'text-align': 'center',
				'height': '100px',
				'position': 'absolute',
				'color': '#FFF',
				'line-height': '1.8'
			}
			
			
			this.mapData.forEach(item =>{
				let text = new AMap.Text({
					text: item['name'] + "<br/>" + item['child'].length + "个",
					anchor: 'center', // 设置文本标记锚点
					cursor: 'pointer',
					style: textStyle,
					position: [item['lng'],item['lat']]
				});
				
				text.setMap(this.map);
				this.pointData.set(item['name'], text);
				
				if(Array.isArray(item['child'])){
					var _arr = [];
				        //生成子项数据点
					item['child'].forEach(el=>{
						var marker = new AMap.Marker({
							position: new AMap.LngLat(el['lng'], el['lat']),
							title: el['name']
						});
						_arr.push(marker); 
					})
					
					//缓存子项数据
					this.pointChildData.set(item['name'], _arr);
				}
			})
		},
		handleAddEvent(){
			let vm = this;
			let level = 11;
			
			console.log(AMap,AMap.event)
			
			AMap.Event.addListener(vm.map,"zoomchange",function(e){
			        //获取级别
					var zoom=vm.map.getZoom();
					//判断大于11时，显示子项
					if(zoom>=level){
						//去除聚合点
						vm.pointData.forEach(function(item){
							vm.map.remove(item);
						});
						//显示所有子项数据点
						vm.pointChildData.forEach(function(item){
							for(var i in item){
								vm.map.add(item[i]);
							}
						});
					}
					//判断小于11时，显示聚合点
					else{
						//去除所有子项数据点
						vm.pointChildData.forEach(function(item){
							for(var i in item){
								vm.map.remove(item[i]);
							}
						});
						//显示聚合点
						vm.pointData.forEach(function(item){
							vm.map.add(item);
						});
					}
				});
		}
	},
	mounted(){
		this.initMap();
	}

}
</script>

<style>
#container {
	width: 100%;
	height: 100%;
}
</style>
